<template>
  <el-row :gutter="20">
    <el-col :span="18">
      <S2 :data="sheetData"></S2>
    </el-col>
    <el-col :span="6">
      <SheetTable
        v-for="(item, index) in regionsData"
        :key="item.id"
        class="mb-20"
        :data="item"
        :isSelected="currentIndex === index"
        @click="onChangeIndex(index)"
      ></SheetTable>
    </el-col>
  </el-row>
</template>

<script setup>
import S2 from './components/s2.vue'
import SheetTable from './components/sheet-table.vue'
import { getChartRegions, getChartSheet } from '@/api/chart'
import { ref } from 'vue'
import { watchSwitchLang } from '@/utils/i18n'

// 获取数据
const regionsData = ref([])
const getRegionsData = async () => {
  const res = await getChartRegions()
  console.log(res)
  regionsData.value = res.regions
  getSheetData(res.regions[0].id)
}
getRegionsData()
watchSwitchLang(getRegionsData)

// 选中
const currentIndex = ref(0)
const onChangeIndex = (index) => {
  currentIndex.value = index
  getSheetData(regionsData.value[currentIndex.value].id)
}

// 获取大区对应的表格数据
const sheetData = ref([])
const getSheetData = async (id) => {
  const res = await getChartSheet(id)
  sheetData.value = res
  console.log(sheetData.value)
}
</script>

<style scoped lang="scss">
.container {
  height: 804px;
  background-color: #bcbfc3;
}
.mb-20 {
  margin-bottom: 20px;
}
</style>
